//a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  //background-color: red;
  height: 100%;
  width:100%;
  //justify-content:center;
  //align-items:center;
  overflow: hidden;
  position: absolute;

  @-webkit-keyframes test {
    0% {
      background-position: 0px -0%;
    }
    100% {
      background-position: 0px -400%;
    }
  }
  @keyframes test {
    0% {
      background-position: 0px -0%;
    }
    100% {
      background-position: 0px -400%;
    }
  }
  .rabbit {
    height: 35px;
    width: 32px;
    animation: test 400ms steps(4) infinite;
    background: url(http://www.web-tinker.com/share/兔斯基揉脸.png);
  }

  @keyframes testStep {
    0% {
      background-position-x: 0%;
    }
    100% {
      background-position-x: -300%;
    }
  }

  .showFace {
    width: 3.706777rem ;
    height: 5.33333rem;
    //align-self: center;
    top:4rem;
    position: absolute;
    animation: showFaceStep 3.5s 0.5s;
    transform: translateX(-100%);
    @keyframes showFaceStep {
      0% {
        transform: translateX(-100%)
      }
      75% {
        transform: translateX(0%)
      }
      100% {
        transform: translateX(-100%)
      }
      //100% {
      //  transform: translateX(0%)
      //}
    }

    .sayHi1 {
      background-image: url("../assets/sayhi/hi.png");
      background-size: 3.706777rem*3 100%;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      position: absolute;
      animation: sayHiStep1 500ms 2s steps(3) 3;
      @keyframes sayHiStep1 {
        0% {
          background-position-x: 0;
        }
        100% {
          background-position-x: -3.706777*3rem;
        }
      }
    }

  }

  .showWalk {
    //width: 232px;
    //height: 357px;
    //width: 2.19rem;
    //height: 3.5rem;
    width: 3.3866666rem;
    height: 4.8rem;
    //background-repeat: no-repeat;

    //background-image: url("../assets/walk/all.png");
    //background-size: auto 100%;
    //background-size: 3.3866666*35rem auto;
    position: absolute;
    //bottom:0;
    bottom:0;
    animation: showWalkStep 2000ms 3.5s linear;
    transform: translate(-3.3866666rem, -2rem);
    opacity: 0;
    //opacity: 1;
    @keyframes showWalkStep {
      0% {
        //background-position: 0%, 0;
        transform: translate(-3.3866666rem, -2rem);
        opacity: 1;
      }
      100% {
        //background-position: -12*3.3866666rem, 0;
        transform: translate(1.5rem, -2rem);
        opacity: 1;
      }
    }
    .walkRepeat{
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-image: url("../assets/walk/all_01.png");
      background-size: 3.3866666*13rem auto;
      animation: walkRepeatStep 400ms 3.5s steps(10) 5;
      @keyframes walkRepeatStep {
        0% {
          background-position: -2*3.3866666rem, 0;
        }
        100% {
          background-position: -12*3.3866666rem, 0;
        }
      }
    }
  }
  .showWalkStop {
    //width: 2.19rem;
    //height: 3.5rem;
    width: 3.3866666rem;
    height: 4.8rem;
    background-repeat: no-repeat;
    background-image: url("../assets/walk/all_01.png");
    background-size: 3.3866666*13rem auto;
    bottom:0;
    position: absolute;
    //bottom:0;
    animation: showWalkStepStop 2000ms 5.5s;
    transform: translate(1.5rem, -2rem);
    background-position: -12*3.3866666rem, 0;
    opacity: 0;
    @keyframes showWalkStepStop {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
  }
  .showWalkReverse{
    //width: 2.19rem;
    //height: 3.5rem;
    width: 3.3866666rem;
    height: 4.8rem;
    background-repeat: no-repeat;
    background-image: url("../assets/walk/all_02.png");
    background-size: 3.3866666*23rem auto;
    transform: translate(1.5rem, -2rem);
    position: absolute;
    bottom:0;
    opacity: 0;
    animation: showWalkReverseStep 100ms 7.5s steps(2);
    @keyframes showWalkReverseStep {
      0% {
        //background-position: 0, 0;
        background-position: -0*3.3866666rem, 0;

        transform: translate(1.5rem, -2rem);
        opacity: 1;
      }
      100% {
        background-position: -2*3.3866666rem, 0;
        transform: translate(1.5rem, -2rem);
        opacity: 1;
      }
    }
  }
  .showWalk2{
    width: 3.3866666rem;
    height: 4.8rem;
    transform: translate(1.5rem, -2rem);
    animation: showWalk2Step 4500ms 7.6s linear;
    position: absolute;
    bottom:0;
    opacity: 0;
    @keyframes showWalk2Step {
      0% {
        //background-position: 0, 0;
        //background-position: -2*3.3866666rem, 0;

        transform: translate(1,5rem, -2rem);
        opacity: 1;
      }
      100% {
        //background-position: -12*3.3866666rem, 0;
        transform: translate(5.5rem, -2rem);
        opacity: 1;
      }
    }
    .showWalkRepeat2{
      width: 3.3866666rem;
      height: 4.8rem;
      background-repeat: no-repeat;
      background-image: url("../assets/walk/all_01.png");
      background-size: 3.3866666*13rem auto;
      //transform: translate(2rem, -2rem);
      position: absolute;
      //bottom:0;
      //opacity: 0;
      //animation: showWalkReverseStep 500ms 8.5s steps(2);
      //transform: translate(2rem, -2rem);
      animation: showWalkRepeat2Step 500ms 7.6s steps(10) 9;

      @keyframes showWalkRepeat2Step {
        0% {
          //background-position: 0, 0;
          background-position: -2*3.3866666rem, 0;

          //transform: translate(2rem, -2rem);
          opacity: 1;
        }
        100% {
          background-position: -12*3.3866666rem, 0;
          //transform: translate(2rem, -2rem);
          opacity: 1;
        }
      }
    }
  }

  .showWalkRound{
    //width: 232px;
    //height: 357px;
    //width: 2.19rem;
    //height: 3.5rem;
    width: 3.3866666rem;
    height: 4.8rem;
    background-repeat: no-repeat;

    background-image: url("../assets/walk/all_02.png");
    //background-size: auto 100%;
    background-size: 3.3866666*23rem auto;
    position: absolute;
    bottom:0;
    animation: showWalkRoundStep 1500ms 12.1s steps(17);
    transform: translate(5rem, -2rem);
    opacity: 0;
    //opacity: 1;
    @keyframes showWalkRoundStep {
      0% {
        background-position: -0*3.3866666rem, 0;
        transform: translate(5rem, -2rem);
        opacity: 1;
      }
      100% {
        background-position: -17*3.3866666rem, 0;
        transform: translate(5em, -2rem);
        opacity: 1;
      }
    }
  }
  .showWalkHi {
    a{
      width:100%;
      height:100%;
      display:inline-block
    }
    //width: 232px;
    //height: 357px;
    //width: 2.19rem;
    //height: 3.5rem;
    width: 3.3866666rem;
    height: 4.8rem;
    background-repeat: no-repeat;

    background-image: url("../assets/walk/all_02.png");
    //background-size: auto 100%;
    background-size: 3.3866666*23rem auto;
    position: absolute;
    //bottom:0;
    bottom:0;
    animation: showWalkHiStep 500ms 13.6s steps(5) infinite;
    //transform:translate(2.5rem,-2rem);
    transform: translate(5rem, -2rem);
    opacity: 0;
    //opacity: 1;
    //background-position: -30*3.3866666rem, 0;

    @keyframes showWalkHiStep {
      0% {
        background-position: -17*3.3866666rem, 0;
        //transform:translate(2.5rem,-2rem);
        transform: translate(5rem, -2rem);

        opacity: 1;
      }
      100% {
        background-position: -22*3.3866666rem, 0;
        //transform:translate(6rem,-6rem);
        transform: translate(5rem, -2rem);
        opacity: 1;
      }
    }
  }

  .wall{
    position: absolute;
    //width: 7rem;
    //height: 6.46rem;
    width: 13.25333rem;
    height: 12.24rem;
    //margin-left: 1.5rem;
    bottom: 3.5rem;
    //background-position:0%,0;
    //align-items: center;
    //transform: translateX(10rem);
    right: -13.25333rem;
    z-index: -2;
    animation :wallStep 3.8s 8.5s forwards linear;
    @keyframes wallStep{
        0%{
          //transform: translateX(10rem);
          right: -13.25333rem;
        }
        100%{
          //transform: translateX(1.5rem);
          right: 1.5rem;

        }
    }
    .adWall {
      position: absolute;
      //width: 7rem;
      //height: 6.46rem;
      width: 13.25333rem;
      height: 12.24rem;
      background-image: url("../assets/adWall/adWallSprite.png");
      background-size: 13.25333*2rem auto;
      background-repeat: no-repeat;
      background-position: 0%, 0;
      animation: addWallStep 550ms 13.6s steps(2) infinite;
      @keyframes addWallStep {
        0% {
          background-position: 0%, 0;
        }
        100% {
          background-position: -13.25333*2rem, 0;
        }
      }
    }
  }
  .dialog{
    position: absolute;
    background-repeat: no-repeat;
    width: 4rem;
    height: 3rem;
    background-image: url("../assets/dialog/desk.png");
    background-size: 100% auto;
    bottom:7rem;
    right: 3.3rem;
    opacity: 0;
    //display: none;
    //transform: scale(0,0);
    animation: dialogStep 2000ms 6500ms forwards 1;
    @keyframes dialogStep {
      0%{
        opacity: 0;

      }
      20%{
        opacity: 1;
      }
      80%{
        opacity: 1;
      }
      100%{
        opacity: 0;
      }
    }
  }
  .shareDiglog{
    a{
      width:100%;
      height:100%;
      display:inline-block
    }
    position: absolute;
    background-repeat: no-repeat;
    background-image: url("../assets/dialog/share.png");
    background-size: 100% auto;
    width: 5rem;
    height: 4rem;
    bottom: 5.5rem;
    right: 0.5rem;
    opacity: 0;
    animation: shareDiglogStep 500ms 13.6s forwards;
    @keyframes shareDiglogStep {
      0%{
        opacity: 0;

      }
      100%{
        opacity: 1;
      }
    }
  }
}
